<template>
	<div class="vh-100 bg-light">
		<headers :title="'商品搜索'"></headers>
		<van-search show-action background="#fff" v-model="value" placeholder="请输入搜索关键词" @search="onSearch">
			<template #action>
				<div @click="onSearch" class="btn-danger btn">搜索</div>
			</template>
		</van-search>
		<div class="m-4 bg-light">
			<div class="mb-3 d-flex justify-content-between" v-if="historys.length === 0 ? false : true">
				<span class="text-secondary">最近搜索</span>
				<svg @click="clear" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
				  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
				  <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
				</svg>
			</div>
			<div class="row-cols-3 row text-center" >
				<div class="col" v-for="values,index in historys" :key="index">
					<div class="bg-white rounded-pill" @click="$router.push(`/searchList/?key=${values}`)">
						{{values}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getHistory,setHistory,removeHistory } from '@/utils/storage'
	import headers from '@/components/header'
	export default {
		name: 'AppSearch',
		data(){
			return{
				value:'',
				historys:getHistory()
			}
		},
		components: {
			headers
		},
		methods: {
			onSearch() {
				if(!this.value.trim())return this.$toast('请输入值')
				if(this.historys.includes(this.value)){
					this.historys.splice(this.historys.indexOf(this.value),1)
					this.historys.unshift(this.value)
				}else{
					this.historys.unshift(this.value)
				}
				setHistory(this.historys)
				this.$router.push(`/searchList/?key=${this.value}`)
			},
			clear(){
				if(confirm('确定要清空吗？')){
					this.historys = []
					return removeHistory()
				}
			}
		}
		
	}
</script>

<style scoped lang="less">
	@import url('../../style/bootstrap.css');
</style>